﻿@using HPIT.RentHouse.DTO
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var citylist = ViewBag.CityList as List<CityDTO>;
}

<style>
    #dv_City {
        z-index: 1000;
        position: absolute;
        font-size: 15px;
        border: 1px solid #aaaaaa;
        text-align: center;
        width: 50px;
        top: 30px;
        left: 25px;
        background-color: #f7f7f7;
        cursor: pointer;
        display: none;
    }

    * {
        touch-action: pan-y;
    }
</style>

<!--header star-->
<div class="header clearfloat">
    <div class="tu clearfloat">
        <img src="~/img/index-banner.jpg" />
    </div>
    <header class="mui-bar mui-bar-nav">
        <a class="btn" id="btn_SelectCity">
            <p>@ViewBag.DefaultCity<i class="iconfont icon-iconfontarrowdown-copy"></i></p>
        </a>
        <div id="dv_City">
            <ul>
                @foreach (var item in citylist)
                {
                    <li id="@item.Id">@item.Name</li>
                }
            </ul>
        </div>

        <div class="top-sch-box flex-col">
            <div class="centerflex">
                <i class="fdj iconfont icon-sousuo"></i>
                <div class="sch-txt">请输入您要搜索的内容</div>
            </div>
        </div>
    </header>
    <div class="header-tit clearfloat">
        <p class="header-num">掌上租已为<span>53789</span>用户成功租房！</p>
        <p class="header-da">轻松租房  乐享生活</p>
    </div>
</div>
<!--header end-->
<div id="main" class="mui-clearfix">
    <!-- 搜索层 -->
    <div class="pop-schwrap">
        <div class="ui-scrollview">
            <div class="poo-mui clearfloat box-s">
                <div class="mui-bar mui-bar-nav clone poo-muitwo">
                    <div class="top-sch-box flex-col">
                        <div class="centerflex">
                            <i id="btn_Search" class="fdj iconfont icon-sousuo"></i>
                            <input class="sch-input mui-input-clear" type="text" name="Keywords" id="Keywords" placeholder="请输入您要搜索的内容" />
                        </div>
                    </div>
                </div>
                <a href="javascript:;" class="mui-btn mui-btn-primary btn-back">取消</a>
            </div>
            <div class="scroll-wrap">
                <div class="mui-scroll">
                    <div class="sch-cont">
                        <div class="section ui-border-b">
                            <div class="tit">热门搜索</div>
                            <div class="tags">
                                <span class="tag">大溪地</span><span class="tag">大溪地</span><span class="tag">大溪地</span>
                                <span class="tag">大溪地</span><span class="tag">大溪地</span><span class="tag">大溪地</span>
                                <span class="tag">大溪地</span><span class="tag">大溪地</span><span class="tag">大溪地</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="cation clearfloat">
        <ul class="clearfloat">
            <li>
                <a href="entire.html">
                    <img src="~/img/fang.png" />
                    <p>整租</p>
                </a>
            </li>
            <li>
                <a href="entire.html">
                    <img src="~/img/chuang.png" />
                    <p>合租</p>
                </a>
            </li>
            <li>
                <a href="entire.html">
                    <img src="~/img/bao.png" />
                    <p>短租</p>
                </a>
            </li>
            <li>
                <a href="entire.html">
                    <img src="~/img/lou.png" />
                    <p>写字楼</p>
                </a>
            </li>
            <li>
                <a href="map.html">
                    <img src="~/img/map.png" />
                    <p>地图找房</p>
                </a>
            </li>
            <li>
                <a href="landlord.html">
                    <img src="~/img/people.png" />
                    <p>我是房东</p>
                </a>
            </li>
            <li>
                <a href="join.html">
                    <img src="~/img/woshou.png" />
                    <p>加盟</p>
                </a>
            </li>
            <li>
                <a href="life-service.html">
                    <img src="~/img/self.png" />
                    <p>生活服务</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="recom clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>热门房源推荐</p>
        </div>
        <div class="content clearfloat box-s">
            <div id="refreshContainer">
                <div id="dv_houseList">
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li class="active">
            <a href="index.html">
                <i class="iconfont icon-shouyev1"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="lease.html">
                <i class="iconfont icon-chuzuwo"></i>
                <p>我要出租</p>
            </a>
        </li>
        <li>
            <a href="schedule.html">
                <i class="iconfont icon-richengbiao"></i>
                <p>看房日程</p>
            </a>
        </li>
        <li>
            <a href="sign.html">
                <i class="iconfont icon-gerenzhongxin"></i>
                <p>个人中心</p>
            </a>
        </li>
    </ul>
</footer>

@section footScript{
    <script src="~/js/template.js"></script>
    <script type="text/javascript">

            //搜索
                $(function () {
                var banner = new Swiper('.banner', {
                    autoplay: 5000,
                pagination: '.swiper-pagination',
                paginationClickable: true,
                lazyLoading: true,
                loop: true
                });

                mui('.pop-schwrap .sch-input').input();
                var deceleration = mui.os.ios ? 0.003 : 0.0009;
                mui('.pop-schwrap .scroll-wrap').scroll({
                    bounce: true,
                indicators: true,
                deceleration: deceleration
                });
                $('.top-sch-box .fdj,.top-sch-box .sch-txt,.pop-schwrap .btn-back').on('click', function () {
                    $('html,body').toggleClass('holding');
                $('.pop-schwrap').toggleClass('on');
                if ($('.pop-schwrap').hasClass('on')) {
                        ;
                $('.pop-schwrap .sch-input').focus();
                    }
                });

            });


        $(function () {

             //点击让城市下拉框显示/隐藏
            $("#btn_SelectCity").click(function () {
                $("#dv_City").toggle();
            });

            //切换城市刷新页面
            $("#dv_City ul li").click(function () {
                cityId = $(this).attr("id");
                location.href = "@Url.Action("Index","Home")?cityId=" + cityId;
            });

            //根据输入的关键字进行查询
            $("#btn_Search").click(function () {
                var keyword = $("#Keywords").val();
                location.href = "@Url.Action("Search", "Home")?Keywords=" + keyword;
            });

            var pageIndex = 1;
            var cityId = "@ViewBag.cityId";
            //上拉加载
            mui.init({
                pullRefresh: {
                    container: refreshContainer,//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                    up: {
                        height: 20,//可选.默认50.触发上拉加载拖动距离
                        auto: true,//可选,默认false.自动上拉加载一次
                        contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                        contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                        callback: function () {
                            var prThis = this;
                            $.post("@Url.Action("LoadMore", "Home")", { pageIndex: pageIndex, cityId: cityId }, function (data) {
                                pageIndex++;
                                console.log(data);

                                //通过模板引擎来渲染列表数据
                                //调用template 方法，渲染模板和数据
                                var html = template("house_list", { houses: data });
                                $("#dv_houseList").append(html);

                                //结束加载
                                prThis.endPullupToRefresh(false);
                            }, "json");
                        }
                    }
                }
            });

        });
    </script>

    <script id="house_list" type="text/html">
        {{each houses as h}}
        <div class="list clearfloat fl box-s">
            <a href="@Url.Action("Detail","Home")?id={{h.Id}}">
                <div class="tu clearfloat">
                    <span></span>
                    <img src="{{h.FirstThumbUrl}}" />
                </div>
                <div class="right clearfloat">
                    <div class="tit clearfloat">
                        <p class="fl">{{h.CommunityName}}</p>
                        <span class="fr">{{h.MonthRent}}<samp>元/月</samp></span>
                    </div>
                    <p class="recom-jianjie">{{h.RoomTypeName}}   |  {{h.Area}}m²  |  {{h.DecorateStatus}}</p>
                    <div class="recom-bottom clearfloat">
                        <span><i class="iconfont icon-duihao"></i>随时住</span>
                        <span><i class="iconfont icon-duihao"></i>家电齐全</span>
                    </div>
                </div>
            </a>
        </div>
        {{/each}}
    </script>
}

